<style type="text/css">
	.layui-table-cell{
		height: auto;	/* layui的表格高度自适应 */
	}
</style>

<fieldset class="layui-elem-field layui-field-title">
  <legend>商品列表</legend>
</fieldset>

<table id="list" lay-filter="list"></table>

<script type="text/html" id="bar">
{{#
	if(d.status == 1){
}}
<a class="layui-btn  layui-btn-sm" lay-event="recover">恢复</a>
{{#
	}
}}
{{#
	if(d.status == 0){
}}
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
{{#
	}
}}
	<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑</a>
</script>

<script type="text/html" id='edit'>

	<form class="layui-form">
	<input type="hidden" name="id" />
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline">
				<input type="text" name="name" class="layui-input" placeholder="请输入商品名" />
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">一级分类</label>
			<div class="layui-input-inline">
				<select name="parent" lay-filter="parent"></select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">二级分类</label>
			<div class="layui-input-inline">
				<select name="goodsSortId"></select>
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">描述信息</label>
			<div class="layui-input-inline">
				<input type="text" name="dscp" class="layui-input" placeholder="请输入描述信息" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">商品价格</label>
			<div class="layui-input-inline">
				<input type="number" name="price" class="layui-input" placeholder="请输入商品价格" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">版本信息</label>
			<div class="layui-input-inline">
				<input type="text" name="version" class="layui-input" placeholder="请输入版本信息" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">商品颜色</label>
			<div class="layui-input-inline">
				<input type="text" name="color" class="layui-input" placeholder="请输入商品颜色" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">商品套餐</label>
			<div class="layui-input-inline">
				<input type="text" name="suit" class="layui-input" placeholder="请输入商品套餐" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<input type="hidden" name="pig" />
			<label class="layui-form-label">商品图片</label>
			<div class="layui-input-inline">
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test2">图片上传</button> 
				  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				    预览图：
				    <div class="layui-upload-list" id="demo2"></div>
				 </blockquote>
				</div>
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">商品数量</label>
			<div class="layui-input-inline">
				<input type="number" name="count" class="layui-input" placeholder="请输入商品数量" />
			</div>
		</div>
		
		
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-inline">
				<button type="submit" class="layui-btn layui-btn-danger" lay-submit lay-filter="edit">编辑商品</button>
			</div>
		</div>
		
	</form>
</script>



<script type="text/html" id="pic">
	{{#
		if(d.goodsPicturre!=null){
	}}
			<img src= "http://127.0.0.1:8888/api/upload/{{d.goodsPicturre.name}}">
	{{#
		}
	}}
</script>

<script type="text/javascript">
	layui.use(["table","form",'upload','element'],function(){
		var table=layui.table;
		var form=layui.form;
		var upload = layui.upload;
		var element=layui.element;
		
		
		table.render({
			elem:'#list',
			url:'http://127.0.0.1:8888/api/goods',
			where:{parent:0},
			method:'get',
			height:500,
			page:true,
			cols:[[
				{field:'id',title:'ID'},
				{field:'name',title:'商品名'},
				{field:'parent',title:'一级分类',templet:function(d){
					return d.goodsSort.parentSort==null ? '' : d.goodsSort.parentSort.name;
				}},
				{field:'goodsSort',title:'二级分类',templet:function(d){
					return d.goodsSort==null ? '' : d.goodsSort.name;
				}},
				{field:'dscp',title:'描述'},
				{field:'price',title:'价格'},
				{field:'version',title:'版本'},
				{field:'color',title:'颜色'},
				{field:'suit',title:'套餐'},
				{field:'count',title:'数量'},
				{field:'status',title:'状态',width:100,templet:function(d){
					return ['正常','删除'][d.status];
				}},
				{title:'操作',toolbar:'#bar',width: 150,fixed:'right' }
			]],		
			parseData:function(res){
				return{
					"code": 0,
					"msg": res.msg,
					"count": res.data.total,
					"data":res.data.list
				}
			},
			done: function(res, curr, count){
				// 固定列高度适应
				$(".layui-table-main  tr").each(function (index ,val) {
					$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
				});
			}
		});

		/**
		 * 绑定删除和编辑的事件
		 */
		table.on('tool(list)',function(obj){
			if(obj.event == 'delete'){
				// 确认删除
				layer.confirm('果真要删除这一条么？',function(index){
					
					layer.close(index);
					// 执行删除操作
					// ID在哪里 obj.data.id
					$.ajax({
						url:'http://127.0.0.1:8888/api/goods',
						type:'delete',
						data:{id: obj.data.id},
						dataType: 'json',
						success:function(data){
							if(data.status==204){
								//删除成功
								layer.msg("删除成功")
				
							}else if(data.status == 404){
								layer.msg(data.msg)
							}
							// 刷新表格
							table.reload('list')
						},
						error:function(){
							
						}
					});
				});
			} else if(obj.event == 'recover') {
				// 确认恢复
				layer.confirm('果真要恢复这一条么？',function(index){
					
					layer.close(index);
					// 执行删除操作
					// ID在哪里 obj.data.id
					$.ajax({
						url:'http://127.0.0.1:8888/api/goods',
						type:'delete',
						data:{id: obj.data.id},
						dataType: 'json',
						success:function(data){
							if(data.status==204){
								//删除成功
								layer.msg("恢复成功")
				
							}else if(data.status == 404){
								layer.msg(data.msg)
							}
							// 刷新表格
							table.reload('list')
						},
						error:function(){
							
						}
					});
				});
			} else if(obj.event == 'edit'){
				//弹出窗口，表单
				var index = layer.open({
					type: 1,
					content: $('#edit').html()
				});
				
				//对表单的操作，渲染，都要写在open之后
				$("input[name='id']").val(obj.data.id);
				$("input[name='name']").val(obj.data.name);
				$("input[name='dscp']").val(obj.data.dscp); 
				$("input[name='price']").val(obj.data.price); 
				$("input[name='version']").val(obj.data.version); 
				$("input[name='color']").val(obj.data.color); 
				$("input[name='suit']").val(obj.data.suit); 
				$("input[name='count']").val(obj.data.count);  
				 
				
				if( obj.data.goodsPicturre != null){
					$("img#demo1").attr('src','http://127.0.0.1:8888/api/upload/'+obj.data.goodsPicturre.name);
				}
				
				//获取当前的token
				var token =getCookie("token");
				
				//获取一级分类
				$.ajax({
					url:'http://127.0.0.1:8888/api/goodsSorts',
					type:'get',
					data:{},
					dataType:'json',
					success:function(data){
						if( data.status == 200){
							var html="<option value=''>请选择一级分类</option>"
							
							$.each(data.data.list,function(index,item){
								if(item.id == obj.data.parent){
									html+="<option value='"+item.id+"' selected=selected>"+item.name+"</option>"
								}else{
									html+="<option value='"+item.id+"'>"+item.name+"</option>"
								}
								
							})
							
							$("select[name='parent']").html(html);
							form.render();
							
						}else {
							
							layer.alert(data.msg,function(){
								window.location.href="login.html";
							});
							
						}
						
					},
					error:function(){
						
					}
				});
				
				form.on('select(parent)', function(data) {
							//获取点击的一级分类
					var parent = data.value;
				
						//获取分类
						if(parent >0){
						$.ajax({
							url: 'http://127.0.0.1:8888/api/goodsSorts',
							type: 'get',
							data: {
								parent: parent
							},
							dataType: 'json',
							success: function(data) {
								if (data.status == 200) {
									var html = "<option value=''>请选择二级分类</option>";
									$.each(data.data.list, function(index, item) {
										if(item.id == obj.data.goodsSortId){
											html += "<option value='" + item.id + "' selected=selected>" + item.name + "</option>";
										}else{
											html+="<option value='"+item.id+"'>"+item.name+"</option>"
										}
										
									});
									$("select[name='goodsSortId']").html(html);
									// 渲染表单
									form.render();
								} else {
									layer.alert(data.msg);
								}
							},
							error: function() {
				
							}
				
				
				
						});
					} else {
						$("select[name='goodsSortId']").html("<option value=''>请选择二级分类</option>");
						// 渲染表单
						form.render();
					}
				});
				
				//常规使用 - 普通图片上传
				 var uploadInst = upload.render({
				   elem: '#test1'
				   ,url: 'http://127.0.0.1:8888/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
				   ,before: function(obj){
				     //预读本地文件示例，不支持ie8
				     obj.preview(function(index, file, result){
				       $('#demo1').attr('src', result); //图片链接（base64）
				     });
				     
				     element.progress('demo', '0%'); //进度条复位
				     layer.msg('上传中', {icon: 16, time: 0});
				   }
				   ,done: function(res){
				     //如果上传失败
				     if(res.code > 0){
				       return layer.msg('上传失败');
				     }
				     //上传成功的一些操作
					 $("input[name='pig']").val(res.data)
				     //……
				     $('#demoText').html(''); //置空上传失败的状态
				   }
				   ,error: function(){
				     //演示失败状态，并实现重传
				     var demoText = $('#demoText');
				     demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				     demoText.find('.demo-reload').on('click', function(){
				       uploadInst.upload();
				     });
				   }
				   //进度条
				   ,progress: function(n, elem, e){
				     element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
				     if(n == 100){
				       layer.msg('上传完毕', {icon: 1});
				     }
				   }
				 });
				
				/**
				  * 请求修改
				  */
				form.on("submit(edit)",function(data){
					//layer.msg(JSON.stringify(data.field));
					//ajax
					
					// 获取被选中的复选框
					var name = $("input[name='pig']").val();
					goodsPicturre=({name:name})
					data.field.goodsPicturre = goodsPicturre;
					
					$.ajax({
						url:'http://127.0.0.1:8888/api/goods',
						type:'put',
						data: JSON.stringify(data.field),
						contentType:'application/json; charset=utf-8',
						dataType:'json',
						success:function(data){
							//修改成功 
							if(data.status == 201){
								layer.msg("修改成功");
							}
							//修改失败
							else{
								layer.msg(data.msg);
							}
							layer.close(index);
							// 刷新表格
							table.reload('list')
							
						},
						error:function(){
							
						}
					});
					
					
					 
					return false;
				});
				
			}
		});
	});
</script>
